<template>
  <footer class="footer">
    <div class="footer-content">
      <!-- 公司信息 -->
      <div class="footer-section">
        <h3 class="footer-title">{{ companyInfo.name }}</h3>
        <p class="footer-text">{{ companyInfo.description }}</p>
        <p class="footer-text">{{ companyInfo.address }}</p>
        <p class="footer-text">电话: {{ companyInfo.phone }}</p>
        <p class="footer-text">邮箱: {{ companyInfo.email }}</p>
      </div>

      <!-- 快速链接 -->
      <div class="footer-section">
        <h3 class="footer-title">快速链接</h3>
        <ul class="footer-links">
          <li v-for="(link, index) in quickLinks" :key="index">
            <router-link :to="link.path" class="footer-link">{{ link.text }}</router-link>
          </li>
        </ul>
      </div>

      <!-- 社交媒体 -->
      <div class="footer-section">
        <h3 class="footer-title">关注我们</h3>
        <div class="social-icons">
          <a 
            v-for="(social, index) in socialMedia" 
            :key="index" 
            :href="social.url" 
            target="_blank"
            class="social-icon"
            :title="social.name"
          >
            <component :is="social.icon" />
          </a>
        </div>
        <div class="newsletter">
          <h4 class="newsletter-title">订阅我们的新闻</h4>
          <div class="newsletter-form">
            <input 
              v-model="email" 
              type="email" 
              placeholder="输入您的邮箱" 
              class="newsletter-input"
            />
            <button @click="subscribe" class="newsletter-button">订阅</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 版权信息 -->
    <div class="footer-bottom">
      <p>&copy; {{ currentYear }} {{ companyInfo.name }}. 保留所有权利.</p>
    </div>
  </footer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Facebook, Twitter, Instagram, Linkedin, Youtube } from 'lucide-vue-next'

// 公司信息
const companyInfo = {
  name: '江苏科技大学苏州理工学院',
  description: '我们致力于为您提供最好的服务和产品。',
  address: '江苏省苏州市张家港市杨舍镇长兴中路8号',
  phone: '400-123-4567',
  email: 'contact@example.com'
}

// 快速链接
const quickLinks = [
  { text: '首页', path: '/' },
  { text: '关于我们', path: '/' },
  { text: '服务', path: '/' },
  { text: '产品', path: '/' },
  { text: '联系我们', path: '/' }
]

// 社交媒体
const socialMedia = [
  { name: 'Facebook', url: 'https://facebook.com', icon: Facebook },
  { name: 'Twitter', url: 'https://twitter.com', icon: Twitter },
  { name: 'Instagram', url: 'https://instagram.com', icon: Instagram },
  { name: 'LinkedIn', url: 'https://linkedin.com', icon: Linkedin },
  { name: 'YouTube', url: 'https://youtube.com', icon: Youtube }
]

// 订阅功能
const email = ref('')

const subscribe = () => {
  if (email.value) {
    alert(`感谢订阅! 我们将发送新闻到 ${email.value}`)
    email.value = ''
  } else {
    alert('请输入有效的邮箱地址')
  }
}

// 当前年份
const currentYear = computed(() => new Date().getFullYear())
</script>

<style scoped>
.footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 2rem 0;
  font-family: 'Arial', sans-serif;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.footer-section {
  flex: 1;
  min-width: 250px;
  margin: 1rem;
}

.footer-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #f1c40f;
}

.footer-text {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-link {
  color: #ecf0f1;
  text-decoration: none;
  display: block;
  margin: 0.5rem 0;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #f1c40f;
}

.social-icons {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.social-icon {
  color: #ecf0f1;
  transition: color 0.3s;
}

.social-icon:hover {
  color: #f1c40f;
}

.newsletter-title {
  margin-bottom: 0.5rem;
}

.newsletter-form {
  display: flex;
  margin-top: 0.5rem;
}

.newsletter-input {
  flex: 1;
  padding: 0.5rem;
  border: none;
  border-radius: 4px 0 0 4px;
}

.newsletter-button {
  background-color: #f1c40f;
  color: #2c3e50;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.3s;
}

.newsletter-button:hover {
  background-color: #f39c12;
}

.footer-bottom {
  text-align: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #34495e;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    margin: 1rem 0;
  }
}
</style>